<template>
  <a-modal
    :visible="props.visible"
    @update:visible="emits('update:visible', false)"
    title="添加用户"
    @ok="submitModifyUser"
  >
    <a-form ref="formRef" :model="userData" :label-col="{ span: 5 }" label-align="right">
      <a-form-item
        :rules="[{ required: true, validator: telValidator }]"
        name="account"
        label="账号"
      >
        <a-input v-model:value="userData.account" />
      </a-form-item>
      <a-form-item required name="name" label="姓名">
        <a-input v-model:value="userData.name" />
      </a-form-item>
      <a-form-item required name="password" label="密码">
        <a-input v-model:value="userData.password" />
      </a-form-item>
      <a-form-item required name="shareName" label="分享人姓名">
        <a-input v-model:value="userData.shareName" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
// import { user_save } from '@/api/user'

const props = defineProps({
  visible: {
    type: Boolean
  }
})

const formRef = ref()

const telValidator = async (_rule, value: string) => {
  if (value === '' || !/^1[3456789]\d{9}$/.test(value)) {
    return Promise.reject('请输入正确的手机号')
  } else {
    return Promise.resolve()
  }
}

const userData = reactive({
  account: undefined,
  name: undefined,
  password: undefined,
  phone: undefined,
  shareName: undefined
})

const emits = defineEmits(['update:visible', 'success'])

const submitModifyUser = async () => {
  try {
    const data = await formRef.value.validateFields()
    // await user_save({ ...data })
    for (let attr in userData) {
      userData[attr] = undefined
    }
    message.success('添加成功')
    emits('update:visible', false)
    emits('success')
  } catch (errorInfo) {
    console.log('Failed:', errorInfo)
  }
}
</script>
